<template>
    <h1>API</h1>
  <el-row class="mb-4">
    <b>属性</b>
    <table width="100%">
        <tr>
          <th width="15%">属性名</th>
          <th>说明</th>
          <th width="15%">类型</th>
          <th width="15%">默认值</th>
        </tr>
        <tr v-for="item in attrs">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
          <td>{{item.type}}</td>
          <td>{{item.defaultValue}}</td>
        </tr>
      </table>
      <b>Slots</b>
    <table width="100%">
      <tr>
          <th width="30%">名称</th>
          <th>说明</th>
      </tr>
      <tr v-for="item in attrs">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
      </tr>
    </table>
  </el-row>
    <el-scrollbar height="400px">
        <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
    </el-scrollbar>
</template>
<script>
export default{
    data(){
        return {
            attrs:[{
              "name":"height",
              "desc":"滚动条高度",
              "type":"",
              "defaultValue":"-"
            },{
              "name":"max-height",
              "desc":"滚动条最大高度",
              "type":"",
              "defaultValue":"-"
            },{
              "name":"native",
              "desc":"是否使用原生滚动条样式",
              "type":"boolean",
              "defaultValue":"false"
            },{
              "name":"wrap-style",
              "desc":"包裹容器的自定义样式",
              "type":"",
              "defaultValue":"-"
            },{
              "name":"wrap-class",
              "desc":"包裹容器的自定义类名",
              "type":"",
              "defaultValue":"-"
            },{
              "name":"view-style",
              "desc":"视图的自定义样式",
              "type":"",
              "defaultValue":"-"
            },{
              "name":"view-class",
              "desc":"视图的自定义类名",
              "type":"",
              "defaultValue":"-"
            },{
              "name":"noresize",
              "desc":"不响应容器尺寸变化",
              "type":"boolean",
              "defaultValue":"false"
            },{
              "name":"tag",
              "desc":"视图的元素标签",
              "type":"",
              "defaultValue":"div"
            },{
              "name":"always",
              "desc":"滚动条总是显示",
              "type":"",
              "defaultValue":"20"
            },{
              "name":"min-size",
              "desc":"滚动条最小尺寸",
              "type":"",
              "defaultValue":"div"
            }],
            events:[{
              "name":"min-size",
              "desc":"滚动条最小尺寸",
              "type":""
            }],
            slots:[{
              "name":"default",
              "desc":"自定义默认内容"
            }]
        }
    }
}
</script>
<style scoped>
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
</style>